<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class='canvas_wrap'>
        <p class='tip'>
            通过键盘的
            <span class="highlight">上下左右</span>
            键控制小蛇移动，
            <span class="highlight">回车键</span>
            可以暂停游戏。
        </p>
        <canvas id='canvas' width="700" height="700"></canvas>
        <div class='footer'>
            <p>游戏的得分：<span class="footer_goal">0</span></p>
            <p>难度：<span class="footer_level"></span></p>
        </div>
        <!-- 难度选择菜单 -->
        <div class="menu_wrap">
            <div class="menu_level">
                <header class="menu_level_header">难度选择</header>
                <select id="menu_level_select">
                    <option value="0">天堂</option>
                    <option value="1">普通</option>
                    <option value="2">困难</option>
                    <option value="3">地狱</option>
                </select>
                <div class="music bgMusicSwitch" data-switch='on'>背景音乐：开</div>
                <div class="music goalMusicSwitch" data-switch='on'>得分音效：开</div>
                <div class="submit_btn">开始游戏</div>
            </div>
        </div>
    </div>
    <audio src="./audio/background.mp3" loop preload="metadata" id="bgAudio" autoplay></audio>
    <audio src="./audio/goal.mp3.ogg" id="gameGoal"></audio>
    <script src="./index.js"></script>
</body>

</html>